<template>
    <div>
        <el-dialog title="注册" :visible.sync="registerVisible" width="300px" center>

            <el-form :model="registerForm" :rules="registerFormRules" ref="registerForm" class="demo-ruleForm">
                <el-form-item prop="userName">
                    <el-input placeholder="请输入账号" prefix-icon="el-icon-user-solid" v-model="registerForm.userName"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input type="password" placeholder="请输入密码" prefix-icon="el-icon-view" v-model="registerForm.password"></el-input>
                </el-form-item>
                <el-form-item prop="confirmPass">
                    <el-input type="password" placeholder="请再次输入密码" prefix-icon="el-icon-view" v-model="registerForm.confirmPass"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click="onRegister" type="primary" size="medium" style="width: 100%">注册</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import usersAPI from "../utils/api/usersAPI";
export default {
  name: "Register",
  data() {
    return {
      registerVisible: false,
      registerForm: {
        userName: "",
        password: "",
        confirmPass: ""
      },
      registerFormRules: {
        userName: [{ validator: validateUserName, trigger: "blur" }],
        password: [{ validator: validatePass, trigger: "blur" }],
        confirmPass: [{ validator: validatePass2, trigger: "blur" }]
      }
    };
    //字母开头,长度5-16之间,允许字母数字下划线
    let reg = /^[a-zA-Z][a-zA-Z0-9_]{4,15}$/;
    let findUserName = false;
    let validateUserName = (rule, value, callback) => {
      if (!value) {
        findUserName = false;
        return callback(new Error("请输入用户名"));
      }
      if (!reg.test(value)) {
        findUserName = false;
        return callback(new Error("字母开头,长度5-16之间,允许字母数字下划线"));
      }

      //判断当前的findUserName是否已经通过了后端校验,如果通过那么直接返回成功即可
      if (findUserName) return callback();

      //请求数据验证密码是否重复
      usersAPI.findUserName({ userName: value }).then(res => {
        let data = res.data;
        if (data.code !== "001") {
          return callback(new Error(data.msg));
        } else {
          //当所有的检查都通过的时候findUserName = true;
          findUserName = true;
          callback();
        }
      });
    };
    //密码验证的逻辑
    let validatePass = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("请输入密码"));
      }
      if (!reg.test(value)) {
        return callback(new Error("字母开头,长度5-16之间,允许字母数字下划线"));
      }
      callback();
    };
    //第二次密码验证
    let validatePass2 = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.registerForm.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
  },
  methods: {
    showRegister() {
      this.registerVisible = true;
    },
    onRegister() {
      this.$refs.registerForm.validate(async valid => {
        //没通过验证
        if (!valid) return;
        //请求数据
        let { data: res } = await usersAPI.register(this.registerForm);
        if (res.code !== "001") {
          this.$notify.error({
            title: "错误",
            message: res.msg
          });
        } else {
          this.registerVisible = false;
          this.$notify({
            title: "成功",
            message: res.msg,
            type: "success"
          });
        }
      });
    }
  }
};
</script>

<style scoped>
</style>